<template>
    <el-dialog
            center
            :before-close="handClose"
            width="50%"
            title="列表"
            :visible.sync="off"
            append-to-body>
            <el-tabs
                @tab-click="clickTab"
                v-model="activeIndex"
                >
                <el-tab-pane
                    label="所属菜单"
                    name="cd"
                >
                     <el-table max-height="700" :data="menu" style="width: 100%">
                        <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                        </el-table-column>
                        <el-table-column prop="menuName" label="菜单名" align="center">
                        </el-table-column>
                        <el-table-column prop="type" label="是否是一级菜单" align="center">
                        </el-table-column>
                        <el-table-column prop="menuId" label="菜单ID" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="cancel(scope.row)">取消关联</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                </el-tab-pane>
                 <el-tab-pane
                    label="所属权限"
                    name="qx"
                >
                    <el-table max-height="700" ref="permission" @select="select" :data="permission" style="width: 100%">
                        <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                        </el-table-column>
                        <el-table-column prop="permissionName" label="权限名" align="center">
                        </el-table-column>
                        <el-table-column prop="type" label="是否是一级菜单" align="center">
                        </el-table-column>
                        <el-table-column prop="permissionId" label="权限ID" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="cancel(scope.row)">取消关联</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                </el-tab-pane>
                <el-tab-pane
                    style="height:700px;overflow-y:auto"
                    label="菜单分配"
                    name="cdfp"
                >
                    <el-tree :default-expand-all="true" node-key="menuId" ref="menu_fp" show-checkbox @check="handleChange" :data="menu_fp" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-tab-pane>
                <el-tab-pane
                    label="权限分配"
                    name="qxfp"
                >
                    <el-table :show-header="false" ref="permission_fp" @select="select" :data="permission_fp" style="width: 100%;height:700px;overflow-y:auto">
                        <el-table-column type="selection">
                        </el-table-column>
                        <el-table-column prop="permissionName" label="权限名" align="center" width="200">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
             </el-tabs>
            <div v-if="isVisible" slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </el-dialog>
</template>

<script>
    import { 
        getUserAllocationMenu, 
        getUserAllocationPermission, 
        getAllMenu, 
        getAllPermission,
        delPermission,
        delMenu,
        allocationMenu,
        allocationPermission,
    } from "@/api/role.js"
    export default {
        name: "menuRole",
        props: {
            off: {
                type: Boolean
            },
            rowData: {
                type: Object
            },
        },
        watch: {
            off(val){
                if(val){
                    this.getMenuAndPermission();
                }
            }
        },
        data(){
            return {
                selectMenu: [], 
                selectPermission: [], 
                currentPage: 1,
                pageSize: 200,
                isVisible: false,
                activeIndex: "cd",
                permission: [],
                permission_fp: [],
                menu: [],
                menu_fp: [],
                defaultProps: {
                    children: 'children',
                    label: 'menuName'
                }
            }
        },
        methods: {
            getMenuAndPermission(){
                var that = this;
                this.$axios.all([
                    this.getAllPermission(),
                    this.getAllMenu(),
                    this.getUserMenu(),
                    this.getUserPermission()
                ])
                .then(this.$axios.spread(function (allPermission, allMenu, userMenu, userPermission) {
                    // 上面两个请求都完成后，才执行这个回调方法
                    // console.log('allPermission', allPermission);
                    // console.log('allMenu', allMenu);
                    // console.log('userMenu', userMenu);
                    // console.log('userPermission', userPermission);
                    setTimeout(() => {
                        console.log(that.permission_fp);
                        that.permission_fp.forEach((e1) => {
                            that.permission.forEach((e2) => {
                                if(e1.permissionId == e2.permissionId){
                                    that.$refs.permission_fp.toggleRowSelection(e1, true);
                                    that.selectPermission.push(e1);
                                }
                            });
                        });
                        let checked = [];
                        that.menu.forEach((e) => {
                            checked.push(e.menuId);
                        });
                        that.$refs.menu_fp.setCheckedKeys(checked, false);
                        console.log(that.$refs.menu_fp.getCheckedNodes());
                        that.selectMenu = that.$refs.menu_fp.getCheckedNodes();
                    }, 1000);
                }));
            },
            getAllPermission(){
                getAllPermission({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }).then(
                    res => {
                        this.permission_fp = res.data.list;
                    },
                    err => {}
                );
            },
            getAllMenu(){
                getAllMenu({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }).then(
                    res => {
                        this.menu_fp = res.data.list;
                    },
                    err => {}
                );
            },
            getUserMenu(){
                getUserAllocationMenu({roleId: this.rowData.roleId}).then(
                    res => {
                        this.menu = res.menus;
                    },
                    err => {}
                );
            },
            getUserPermission(){
                getUserAllocationPermission({roleId: this.rowData.roleId}).then(
                    res => {
                        this.permission = res.perms;
                    },
                    err => {}
                );
            },
            cancel(row){
                console.log("row", row);
                if(this.activeIndex == "qx"){
                    delPermission({
                        roleId: this.rowData.roleId,
                        permId: row.permissionId
                    }).then(
                        res => {
                            this.$notify({
                                type: "success",
                                message: "取消关联成功"
                            });
                            this.getUserPermission();
                        },
                        err => {}
                    );
                }else if(this.activeIndex == "cd"){
                    delMenu({
                        roleId: this.rowData.roleId,
                        menuId: row.menuId
                    }).then(
                        res => {
                            this.$notify({
                                type: "success",
                                message: "取消关联成功"
                            });
                            this.getUserMenu();
                        },
                        err => {}
                    );
                }
                this.getMenuAndPermission();
            },
            handleChange(data, checked) {
                console.log(data, checked);
                this.selectMenu = checked.checkedNodes;
            },
            clickTab(tab){
                console.log("tab", tab);
                if(tab.name == "cd" || tab.name == "qx"){
                    this.isVisible = false;
                }else{
                    this.isVisible = true;
                }
            },
            indexSort(index){
                return ++index;
            },
            select(selection, row){
                console.log("row", row);
                if(this.selectPermission.length == 0){
                    this.selectPermission.push(row);
                }else{
                    let flag = this.selectPermission.find(e => e.permissionId == row.permissionId);
                    if(!flag){
                        this.selectPermission.push(row);
                    }else{
                        this.selectPermission = this.selectPermission.filter((e) => {
                            return e.permissionId != row.permissionId;
                        });
                    }
                }
            },
            handClose(){
                this.$emit("update:off", false);
                this.selectMenu = [];
                this.selectPermission = [];
                this.activeIndex = "cd";
            },
            handleNodeClick(data) {
                console.log(data);
            },
            submit(){
                if(this.activeIndex == "cdfp"){
                    if(this.selectMenu.length == 0){
                        this.$notify({
                            type: "warning",
                            message: "请至少选择一个菜单"
                        });
                        return;
                    }
                    allocationMenu({
                        roleId: this.rowData.roleId,
                        menus: this.selectMenu
                    }).then(
                        res => {
                            this.$notify({
                                type: "success",
                                message: "分配菜单成功"
                            });
                            this.handClose();
                        },
                        err => {}
                    );
                }else if(this.activeIndex == "qxfp"){
                    if(this.selectPermission.length == 0){
                        this.$notify({
                            type: "warning",
                            message: "请至少选择一个权限"
                        });
                        return;
                    }
                    allocationPermission({
                        permissions: this.selectPermission,
                        roleId: this.rowData.roleId
                    }).then(
                        res => {
                            this.$notify({
                                type: "success",
                                message: "分配权限成功"
                            });
                            this.handClose();
                        },
                        err => {}
                    );
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/.el-table td{
        border: none;
    }
</style>